<template>
  <div id="server-rank">
    <ContentField>
      <template v-slot:content-field-card-name>服务员评价排行榜</template>
      <template v-slot:content-field-card-button></template>
      <template v-slot:content-field-card-body>
        <div id="server-rank-body" style="position: relative">
          <el-table
            :data="server_rank_list"
            border
            height="500"
            style="width: 100%; position: absolute"
          >
            <el-table-column prop="name" label="服务员姓名" />
            <el-table-column prop="serverReviewStar" label="评分" />
          </el-table>
        </div>
      </template>
      <template v-slot:content-field-card-footer></template>
    </ContentField>
  </div>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { useStore } from "vuex";
import { computed, ref } from "vue";

export default {
  components: {
    ContentField,
  },
  setup() {
    let store = useStore();

    let page_num = ref(0);
    let page_content = ref(10);

    store.dispatch("get_review_rank_about_server", {
      token: store.state.user.jwt_token,
      page_num: page_num.value,
      page_content: page_content.value,
    });

    let server_rank_list = computed(() => {
      let res = store.state.review.server_rank_list;
      if (res != null) {
        res.forEach((element) => {
          if (isNaN(element.serverReviewStar)) {
            element.serverReviewStar = "暂未评分";
          }
        });
      }
      return res;
    });

    return {
      store,
      server_rank_list,
    };
  },
};
</script>

<style scoped></style>
